<template>
  <u-form ref="formRef" :form="form">
    <template #form-role="{ item, data }">
      <el-radio-group v-model="data.role">
        <el-radio value="用户" size="small">用户</el-radio>
        <el-radio value="管理员" size="small">管理员</el-radio>
      </el-radio-group>
    </template>
    <template #form-allUser="{ item, data }">
      <el-switch v-model="data.allUser" />
    </template>
    <div class="submit">
      <el-button type="primary" @click="submit">提交</el-button>
      <el-button @click="reset">重置</el-button>
    </div>
  </u-form>
</template>
<script setup lang="ts">
import { reactive, ref, watch } from 'vue'
import { FormApi } from '~/components'
import { Time } from '~/util'

const options = [
  {
    value: '1',
    label: 'Option1'
  },
  {
    value: '2',
    label: 'Option2'
  },
  {
    value: '3',
    label: 'Option3'
  },
  {
    value: '4',
    label: 'Option4'
  },
  {
    value: '5',
    label: 'Option5'
  }
]

const form = reactive<FormApi>({
  labelWidth: 120,
  data: {
    username: 1,
    date: '2026'
  },
  items: [
    {
      label: '用户名',
      prop: 'username',
      width: 300,
      required: true,
      loading: true,
      component: {
        name: 'el-input',
        disabled: true
      }
    },
    {
      label: '性别',
      prop: 'sex',
      rule: [{ required: true, message: '性别不能为空', trigger: 'blur' }],
      component: {
        name: 'el-select',
        width: 200,
        showValue: true,
        filterable: true,
        reserveKeyword: false,
        multiple: true,
        collapseTags: true,
        options: [
          { label: '男', value: 1 },
          { label: '女', value: 0 }
        ]
      },
      event: {
        change: (val: any) => {
          console.log(val)
        }
      }
    },
    {
      label: '角色',
      prop: 'role',
      value: '用户',
      group: '详细信息'
    },
    {
      label: '是否全部用户',
      prop: 'allUser',
      value: false,
      group: '详细信息'
    },
    {
      label: '年龄',
      prop: 'age',
      value: 0,
      component: {
        name: 'el-input'
      }
    },
    {
      label: '日期',
      prop: 'date',
      component: {
        name: 'el-date',
        type: 'year',
        'value-format': 'YYYY'
      }
    },
    {
      label: '关键词',
      prop: 'search',
      component: {
        name: 'u-search2',
        remoteSearch: (val: string, done: (arg: any[]) => void) => {
          setTimeout(() => {
            console.log('搜索')
            done(states.filter(e => e.toLowerCase().includes(val.toLowerCase())))
          }, 200)
        }
      }
    },
    {
      label: '选项',
      prop: 'options',
      width: 310,
      value: '2',
      component: {
        name: 'el-select',
        options: [
          {
            value: '2',
            label: 'Option2'
          }
        ],
        collapseTags: true,
        remoteSearch: (val: string, done: (arg: any[]) => void) => {
          setTimeout(() => {
            done(options.filter(e => e.label.includes(val)))
          }, 200)
        }
      }
    },
    {
      label: '校验',
      prop: 'rule',
      width: 300,
      rule: {
        trigger: 'blur',
        validator: (rule: any, value: any, done: any) => {
          form.data.rule = 1
          console.log('test')
          done()
        }
      },
      component: {
        name: 'el-input'
      }
    }
  ]
})

watch(
  () => form.data.allUser,
  val => {
    form.items.forEach(v => {
      if (v.prop == 'options') {
        v.hide = val
      }
    })
  },
  { immediate: true }
)

const states = [
  'Alabama',
  'Alaska',
  'Arizona',
  'Arkansas',
  'California',
  'Colorado',
  'Connecticut',
  'Delaware',
  'Florida',
  'Georgia',
  'Hawaii',
  'Idaho',
  'Illinois',
  'Indiana',
  'Iowa',
  'Kansas',
  'Kentucky',
  'Louisiana',
  'Maine',
  'Maryland',
  'Massachusetts',
  'Michigan',
  'Minnesota',
  'Mississippi',
  'Missouri',
  'Montana',
  'Nebraska',
  'Nevada',
  'New Hampshire',
  'New Jersey',
  'New Mexico',
  'New York',
  'North Carolina',
  'North Dakota',
  'Ohio',
  'Oklahoma',
  'Oregon',
  'Pennsylvania',
  'Rhode Island',
  'South Carolina',
  'South Dakota',
  'Tennessee',
  'Texas',
  'Utah',
  'Vermont',
  'Virginia',
  'Washington',
  'West Virginia',
  'Wisconsin',
  'Wyoming'
]

const formRef = ref()

function covnert(data: any, obj: any[]) {
  obj.forEach(e => {
    let arr = (e.key as string).split(',')
    let value = data[arr[0]]
    let o = e.options.find((e2: any) => e2.value == value)
    data[arr[1]] = o?.label
  })
}

let obj = { sex: 0, status: 1 }
let list = [
  { label: '男', value: 1 },
  { label: '女', value: 0 }
]

let list2 = [
  { label: '开启', value: 1 },
  { label: '禁用', value: 0 }
]

covnert(obj, [
  { key: 'sex,sexName', options: list },
  { key: 'status,statusName', options: list2 }
])
console.log(obj)

function reset() {
  formRef.value.resetFields()
}

async function submit() {
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      console.log(form.data)
    } else {
      console.log(form.data)
    }
  })
}
</script>

<style lang="scss" scoped>
.u-form {
  :deep(.el-form) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    @media only screen and (max-width: 768px) {
      grid-template-columns: repeat(1, 1fr);
    }
    .form-role {
      grid-column: 1 / -1;
    }
    .submit {
      grid-column: 1 / -1;
      margin-left: 80px;
    }
  }
}
</style>
